<template>
  <div class="bottom">
    <!-- 视频背景容器 -->
    <div class="video-background">
      <video autoplay muted loop playsinline>
        <source src="@/assets/background.mp4" type="video/mp4">
        您的浏览器不支持HTML5视频
      </video>
    </div>

    <!-- 音频元素（隐藏） -->
    <audio ref="bgMusic" loop>
      <source src="@/assets/backgroundmus.mp3" type="audio/mpeg">
      您的浏览器不支持音频元素
    </audio>

    <!-- 内容层 -->
    <div class="content">
      <nav>
        <router-link to="/">习题中心</router-link> |
        <router-link to="/about">个人中心</router-link>
        <button @click="toggleMusic" class="music-toggle">
          {{ isMusicPlaying ? '🔊' : '🔇' }}
        </button>
      </nav>
      <router-view/>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const bgMusic = ref(null)
const isMusicPlaying = ref(false)

// 尝试播放音乐（需用户交互后）
const playMusic = () => {
  if (bgMusic.value) {
    bgMusic.value.play()
      .then(() => { isMusicPlaying.value = true })
      .catch(e => console.warn('自动播放被阻止:', e))
  }
}

// 切换音乐播放状态
const toggleMusic = () => {
  if (!bgMusic.value) return
  if (isMusicPlaying.value) {
    bgMusic.value.pause()
  } else {
    bgMusic.value.play()
  }
  isMusicPlaying.value = !isMusicPlaying.value
}

// 页面加载后尝试播放（可能需要用户先交互）
onMounted(() => {
  // 添加点击事件监听（解决浏览器自动播放限制）
  document.addEventListener('click', () => {
    playMusic()
  }, { once: true })
})
</script>

<style scoped>
/* 容器基础样式 */
.bottom {
  position: relative; /* 关键：建立相对定位上下文 */
  width: 100%;
  min-height: 100vh; /* 根据需求调整高度 */
  overflow: hidden;
}

/* 视频背景样式 */
.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 确保视频在底层 */
}

.video-background video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持视频覆盖整个区域 */
}

/* 内容层样式 */
.content {
  position: relative; /* 关键：使内容在视频上方 */
  z-index: 1;
  color: white; /* 根据视频调整文字颜色 */
  padding: 20px;
}

/* 导航链接样式（示例） */
nav a {
  color: #fff;
  text-decoration: none;
  margin: 0 10px;
  font-weight: bold;
}

/* 音乐控制按钮样式 */
.music-toggle {
  background: transparent;
  border: none;
  color: white;
  font-size: 1.2em;
  cursor: pointer;
  margin-left: 15px;
  padding: 5px;
}

/* 隐藏音频元素 */
audio {
  display: none;
}
</style>
